<html>
<head>
    <title>frontPaper.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="multipart/form-data; charset=UTF-8"/>

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <link  type="text/css" href="../css/indexx.css"  rel="stylesheet">
    <script type="text/javascript" src="../js/jquery.cxscroll.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/slide.js"></script>
    <script type="text/javascript" src="../js/jquery.carouFredSel-6.0.4-packed.js"></script>
    <script type="text/javascript" src="../js/silder.js"></script>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <script type="text/javascript" src="../js/moent.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div class="headtop">
        <div class="timer box"><span><a onclick="javascript:window.external.addFavorite('/','')" href="/">加入收藏</a> | <a
                onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('/');" href="/">设为首页</a></span>
            <script type="text/javascript" src="../js/timer.js"></script>
        </div>
    </div>

    <nav id="nav" class="box">
    <ul>
        <li><a href="/hns/tohns">首页</a></li>
        <li><a href="http://hen.wenming.cn">省文明办</a></li>
        <li><a href="http://hen.wenming.cn/wenmingchuangjian/">文明创建</a></li>
        <li><a href="http://hen.wenming.cn/daodemufan/">道德模范</a></li>
        <li><a href="/hns/zlxz">资料下载</a></li>
        <li><a href="/hns/exam">知识测验</a></li>
        <li><a href="/hns/test">联系我们</a></li>
    </ul>
</nav>

</header>
<!--头部 end-->
<div class="banner box"><img src="../img/banner2.png" style="width: 1000px;"></div>

<div id="tableView" style="margin-left: 460px;width: 1000px;">
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="标题">
                <el-input v-model="searchForm.title" placeholder="标题"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchClick">查询</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    <!--列表-->
    <el-row>
        <el-table
                :data="tableData"
                v-loading.body="loading"
                border

                style="width: 100%">
            <!-- <el-table-column
                    type="selection"
                    width="55">
            </el-table-column> -->
            <el-table-column
                    type="index"
                    label="序号"
                    width="150"
                    align="center"
                    >
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    align="center"
                    width="260">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="创建时间"
                    align="center"
                    width="270">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <template scope="scope">
                    <el-button :plain="true" type="info"  icon="el-icon-download" @click="downloadClick(scope.row)">
                        下载
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <!--列表  End-->
    <!--列表底部工具条和分页符-->
    <el-row style="margin-top: 20px" type="flex" justify="end">
        <!-- <el-col :span="6" >
            <el-button :plain="true" type="danger"  icon="delete" @click="removeSelection">删除所选</el-button>
        </el-col> -->
        <el-col :span="18">
            <el-pagination
                    style="float: right"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>
</div>
</body>
    <script type="text/javascript">
        var top=new Vue({
            el:'#app',
            data:{
                message:'学习资料'
            }
        })
        var tableView=new Vue({
            el:'#tableView',
            data: {
                //列表数据
                tableData: [],
                //显示加载中样式
                loading:false,
                //搜索表单
                searchForm: {
                    /* id: '', */
                    title: ''
                },
                //当前页
                currentPage:1,
                //分页大小
                pageSize:5,
                //总记录数
                total:800,
                //删除的弹出框
                deleteVisible:false,
                //编辑界面是否显示
                editFormVisible: false,
                editLoading: false,
                goUrl:'',
                editFormRules: {
                    title:[
                        { required: true, message: '请输入标题', trigger: 'blur' }
                    ]
                },
                messageForm: {
                    title:'',
                    filePath:[]
                },
                /*
                *    显示时间
                * */

            },
            /*
            *       运行即加载   加载数据表格
            * */
            created:function(){
                //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
                var self = this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.pageSize;
                axios.post('/questionbank/list',{'start':start,'pageSize':end}).then(function(response){
                    // console.log(response.data);
                    //alert(response.data.total);
                    self.total=response.data.total;
                    self.tableData = response.data.data;

                    // self.multipleSelection=response.data.data;
                })
            },
            methods:{
                loadingData:function() {
                    var _self = this;
                    _self.loading = true;
                    //var self = this;
                    var start =(this.currentPage-1)*this.pageSize;
                    var end =this.pageSize;
                    var searchForm={'start':start,'pageSize':end,'title':this.searchForm.title};
                    //   alert(JSON.stringify(searchForm));
                    axios.post('/questionbank/list',searchForm).then(function(response){
                        console.log(response.data);
                        //alert(response.data);
                        _self.total=response.data.total;
                        //alert(JSON.stringify(response.data.options));
                        _self.tableData = response.data.data;
                        //_self.multipleSelection=response.data.data;
                    })
                    console.log(_self.currentPage);
                    setTimeout(function(){
                        console.info("加载数据成功");
                        _self.loading = false;
                    },300);
                },
                success:function(res, file) {
                    this.messageForm.filePath.push(file.response);
                },
                //文件超出限制个数时
                handleExceed:function(files, fileList) {
                    this.$message.warning('当前限制选择 1 个文件');
                },
                //移除文件时
                beforeRemove:function(file, fileList) {
                    return this.$confirm('确定移除此文件吗?');
                },

                //下载事件
                downloadClick:function(row) {
                    window.location.href="/questionbank/downLoad?fileName="+row.filePath;
                },
                //取消事件
                resetForm:function(messageForm) {
                    this.$refs[messageForm].resetFields();
                },
                //表格查询事件
                searchClick:function() {
                    var self = this;
                    self.loadingData();//重新加载数据
                },
                //分页大小修改事件
                pageSizeChange:function(val) {
                    console.log('每页 ' + val +' 条');
                    this.pageSize = val;
                    var _self = this;
                    _self.loadingData();//重新加载数据
                },

                /*提示*/
                handlePreview(file) {
                    console.log(file);
                },

            }
        })

    </script>
</html>